<template>
    <div class="w750 gray-body scrollable" :class="[Nomsg ? 'white-bg' : '', themes.theme]" @scroll="onScroll" ref="w750">
        <!-- 头部 -->
        <header v-if="!preview">
            <div class="header-box">
                <div class="header-back" @click="goback">
                    <span class="back-img"><img src="../../assets/images/back.png" alt="" /></span>
                </div>
                <div class="header-search">
                    <p class="ser-txt">{{ headerTitle }}</p>
                </div>
                <div class="header-mes"></div>
            </div>
        </header>
        <!-- /头部 -->

        <template v-if="!Nomsg">
            <template v-if="!loadFailed">
                <template v-if="floorArr && floorArr.length">
                    <div class="index">
                        <!-- 楼层装修 -->
                        <div class="floor" v-for="(floors, index) in floorArr" :key="index">
                            <!-- 轮播图 -->
                            <template v-if="floors.type == 'slider'">
                                <div class="banner" v-if="floors.photos && floors.photos.length">
                                    <slider :floors="floors" @click="jumpPage"></slider>
                                </div>
                            </template>
                            <!-- 轮播图 end-->

                            <!-- 图文导航 -->
                            <template v-if="floors.type == 'navigation'">
                                <navigation :floors="floors" @click="jumpPage"></navigation>
                            </template>
                            <!-- 图文导航 -->

                            <!-- 标题组件 -->
                            <template v-if="floors.type == 'title'">
                                <ls-title :floors="floors" @click="jumpPage"></ls-title>
                            </template>
                            <!-- 标题组件 end -->

                            <!-- 魔方 -->
                            <template v-if="floors.type == 'cube'">
                                <cube :floors="floors" @click="jumpPage"></cube>
                            </template>
                            <!-- 魔方 end -->

                            <!-- 商品列表 -->
                            <template v-if="floors.type == 'prodList'">
                                <prod-list :floors="floors" :scrollTop="scrollTop"></prod-list>
                            </template>
                            <!-- 商品列表 end-->

                            <!-- 辅助空白 -->
                            <template v-if="floors.type == 'blank'">
                                <blank :floors="floors"></blank>
                            </template>
                            <!-- 辅助空白 end -->

                            <!-- 辅助线 -->
                            <template v-if="floors.type == 'subline'">
                                <subline :floors="floors"></subline>
                            </template>

                            <!-- 辅助线 end -->

                            <!-- 富文本 -->
                            <template v-if="floors.type == 'richText'">
                                <rich-text :floors="floors"></rich-text>
                            </template>
                            <!-- 富文本 -->
                        </div>
                        <!-- 楼层装修 -->
                    </div>
                </template>
            </template>

            <template v-if="loadFailed">
                <div class="reFresh">
                    <img src="../../assets/images/noLine.png" alt />
                    <p>网络请求失败</p>
                    <div>请检查网络后,下拉刷新重试</div>
                </div>
            </template>
        </template>

        <Noempty :pic="require('../../assets/images/order-empty.png')" :title="'您暂无相关楼层装修'" v-if="Nomsg" />
        <!-- 先用这个 -->
        <div style="height: 60px"></div>
    </div>
</template>

<script>
import slider from 'components/index/slider'
import navigation from 'components/index/navigation'
import lsTitle from 'components/index/lsTitle'
import cube from 'components/index/cube'
import prodList from 'components/index/prodList'
import blank from 'components/index/blank'
import subline from 'components/index/subline'
import richText from 'components/index/richText'
import Noempty from 'components/Noempty/Noempty'
import ProList from 'components/proList/proList'
import { mapState } from 'vuex'
import { showPosterPage } from 'api/index'
import jumpMixin from 'mixin/jumpMixin.js'
export default {
    data() {
        return {
            preview: false,
            headerTitle: '', //头部title
            floorArr: null, //楼层装修
            Nomsg: false,
            isLoading: false,
            loadFailed: false,
            isScroll: false,
            scrollTop: 0 //滚动高
        }
    },
    mixins: [jumpMixin],
    mounted() {
        let pageId = this.$route.query.pageId
        this.preview = this.$route.query.preview

        //获取商城首页数据
        this.getShoppingIndex(pageId)
    },

    methods: {
        goback() {
            this.$router.back()
            this.$router.isBack = true
        },
        //获取首页装修数据
        getShoppingIndex(pageId) {
            let that = this
            showPosterPage({ pageId: pageId })
                .then((res) => {
                    if (res.status == 1) {
                        this.loadFailed = false
                        if (res.result) {
                            this.floorArr = res.result.components
                            this.changeTitle()
                        } else {
                            this.Nomsg = true
                        }
                    } else {
                        this.Nomsg = true
                        this.$toast(res.msg)
                    }
                })
                .catch((e) => {
                    this.loadFailed = true
                })
        },

        onScroll(event) {
            // console.debug(event);
            let target = event.target
            this.scrollTop = target.scrollTop
        },
        // 改变标题名字
        changeTitle() {
            const title = this.$route.query.title || (this.floorArr[0].action && this.floorArr[0].action.prodGroup.name) || '页面'
            this.headerTitle = title
            document.title = title
        }
    },

    components: {
        ProList,
        Noempty,
        slider,
        navigation,
        lsTitle,
        cube,
        prodList,
        blank,
        subline,
        richText
    },
    computed: {
        ...mapState(['themes'])
    }
}
</script>

<style src="../../assets/css/index.css" scoped></style>
<style scoped>
.van-swipe-item img {
    width: 100%;
    height: 100%;
}
.van-swipe__indicators {
    bottom: 25px !important;
}
.van-swipe__indicators .van-swipe__indicator {
    width: 8px !important;
    height: 8px !important;
}
.van-pull-refresh {
    min-height: 100%;
}
</style>
<style scoped lang="stylus">
.reFresh {
  width: 100%;
  height: 100%;
  margin: 100px auto;
  text-align: center;

  img {
    width: 100px;
    height: 100px;
  }
}
</style>
<style lang="stylus">
#commCotent4 {
  width: 100%;

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  a {
    width: 100% !important;
  }

  div {
    width: 100% !important;
  }

  ul {
    width: 100% !important;
  }

  li {
    width: 100% !important;
  }
}

.scrollable {
  overflow: scroll;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
